<template>
  <div>
    <!-- 卡片 -->
    <el-card class="box-card manage">
      <!-- 头部 -->
      <div slot="header" class="clearfix manage_header">
        <!-- 返回 -->
        <div class="back" @click="backClick">
          <i></i>
          <span>返回</span>
        </div>
        <h1>修改软件</h1>
      </div>
      <!-- 表单 -->
      <el-form :label-position="labelPosition" size="18px" label-width="100px" :model="FormData">
        <!-- 新增子类 -->
        <div class="present addSoftSele">分类选择</div>
        <el-form-item label="分类名称:">
          <el-input v-model="FormData.classLevel1Id"></el-input>
        </el-form-item>
        <el-form-item label="二级子类:">
           <el-select v-model="FormData.classLevel2Id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="三级子类:">
           <el-select v-model="FormData.classLevel3Id" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="present addSoftSele">软件参数</div>
        <el-form-item label="软件名称:">
          <el-input v-model="FormData.name"></el-input>
        </el-form-item>
        <el-form-item label="图标:" class="upo">
          <!-- 上传图片 -->
          <el-upload
            :class="FormData.icon"
            :on-success="handleSuccess"
            action="https://jsonplaceholder.typicode.com/posts/"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
          >
            <div class="upload_btn">
              <i></i>
              <span>选择图片</span>
            </div>
          </el-upload>
          <div class="upload_none" v-if="photoLength==0">未选择图片</div>
          <div class="upload_none" v-else>已选择图片</div>
        </el-form-item>
        <el-form-item label="购买积分:">
          <el-input v-model="FormData.integral"></el-input>
        </el-form-item>
        <div class="present addSoftSele">辅助参数</div>
        <el-form-item label="大小:">
          <el-input v-model="FormData.size"></el-input>
        </el-form-item>
        <el-form-item label="时间:">
          <el-input v-model="FormData.modification_time"></el-input>
        </el-form-item>
        <el-form-item label="支持语言:">
          <el-input v-model="FormData.language"></el-input>
        </el-form-item>
        <el-form-item label="系统:">
          <el-radio v-model="FormData.system" label="1">win</el-radio>
          <el-radio v-model="FormData.system" label="2">mac</el-radio>
        </el-form-item>
        <el-form-item label="国内外:">
          <el-radio v-model="FormData.software" label="1">国内</el-radio>
          <el-radio v-model="FormData.software" label="2">国外</el-radio>
        </el-form-item>
        <el-form-item label="软件介绍:">
          <div class="addSoftEditor">
            <Uediter v-model="FormData.content_introduction"></Uediter>
          </div>
        </el-form-item>
      </el-form>
      <!-- 按钮 -->
      <el-button class="save" @click="handleSave">保存</el-button>
    </el-card>
  </div>
</template>

<script>
// 富文本插件
import Uediter from "@/components/ue.vue";
export default {
  data() {
    return {
      // 百度富文本
      annouceForm: {
        name: ""
      },
      dat: {
        content: ""
      },
      ueditor: {
        value: "编辑器默认文字",
        config: {}
      },
      labelPosition: "right",
      text: "应用",
      FormData: {
        classLevel1Id:'', // 分类名称
        classLevel2Id:'', // 二级子类
        classLevel3Id:'', // 三级子类
        name:'', //名称
        icon:'', //图标
        integral:'', // 购买积分
        size:'',  //大小
        modification_time:'',  //时间
        language:'',  //语言
        system:'1',  //系统
        software:'1',  //国内外
        content_introduction:''  //软件介绍
      },
      options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '',
      // 上传图片的长度
      photoLength: 0,
      token: this.$route.query.token,
      row: this.$route.query.row
    };
  },
  // 引入富文本
  components: {
    Uediter
  },
  methods: {
    backClick() {
      this.$router.go(-1);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    // 富文本发生改变
    onEditorChange({ editor, html, text }) {
      this.content = html;
    },
    // 上传成功之后
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList.length);
      this.photoLength = fileList.length;
    },
    // 上传失败
    handleErr(err, file, fileList) {
      console.log(err);
    },
    // 点击保存
    handleSave() {
      console.log(11);
      
      this.$axios.put('http://47.105.140.58:8084/applicationprograms/saveParam',this.FormData).then(res=>{
        console.log(res);
      })
    }

  },
  mounted() {
    console.log(this.row)
    this.FormData.classLevel1Id = this.row.classLevel1Id
    this.FormData.classLevel2Id = this.row.classLevel2Id
    this.FormData.classLevel3Id = this.row.classLevel3Id
    this.FormData.name = this.row.name
    this.FormData.icon = this.row.icon
    this.FormData.integral = this.row.integral
    this.FormData.size = this.row.size
    this.FormData.modification_time = this.row.modification_time
    this.FormData.language = this.row.language
    if(this.row.system == 'MAC') {
      // console.log(11);
      this.FormData.system = '2'
    } else {
      this.Form.system = '1'
    }
    // this.FormData.system = this.row.system
    if(this.row.software == "外国软件") {
      // console.log(11);
      this.FormData.software = '2'
    } else {
      this.FormData.software = '1'
    }
    // this.FormData.software = this.row.software
    this.FormData.content_introduction = this.row.content_introduction
  }
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.manage_header {
  margin: 10px 0 9px 30px;
  position: relative;
}
.manage_header i {
  /* display: block; */
  position: absolute;
  top: 5px;
  left: 0;
  width: 10px;
  height: 20px;
  background: url("../assets/img/left.png") no-repeat;
  background-size: 10px 20px;
  vertical-align: middle;
}
.manage_header span {
  position: absolute;
  top: 0px;
  left: 22px;
  margin: 0;
  font-size: 20px;
  color: #3f51b5;
}
.manage_header h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  text-align: center;
  color: #212121;
}
.manage .el-card__header {
  padding: 0;
}
/* .present {
  margin-left: 66px;
} */
.el-input {
  width: 160px;
  height: 36px;
}
.el-form {
  margin: 20px 60px 62px;
}
label {
  font-size: 18px !important;
}
.el-form-item__label {
  padding: 0;
}
.upload_btn {
  background-color: #fff;
  width: 160px;
  height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

.upload_btn i {
  width: 28px;
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  background: url(../assets/img/photo.png) no-repeat;
  background-size: 28px 20px;
  margin: 0;
}
.upload_btn span {
  font-size: 16px;
  color: #757575;
  /* line-height: 47px; */
}
.upload_none {
  display: inline;
  margin-left: 10px;
}
.upload-demo {
  float: left;
}
.save {
  width: 200px;
  height: 50px;
  background: #3f51b5;
  border-radius: 5px;
  font-size: 24px;
  margin-left: 60px;
  color: #ffffff;
}
.manage h1 {
  padding: 0;
}
#app {
  text-align: center;
}
.erji {
  position: relative;
  width: 160px;
  height: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}
.erji i {
  position: absolute;
  top: 10px;
  right: 15px;
}
.addSoftEditor {
  width: 802px;
  height: 513px;
}
.addSoftSele {
  margin-bottom: 26px;
}
.el-select {
    width: 162px;
    height: 38px;
}
</style>
